<template>
	<view>
		<uv-tabbar activeColor="rgba(102, 205, 157, 1)" inactiveColor="rgba(166, 166, 166, 1)" :value="tabbarStore.activeTabbar" @change="changeTab" :placeholder="true">
			<uv-tabbar-item v-for="(item, index) in list" :key="index" :text="item.text" :icon="item.icon"></uv-tabbar-item>
		</uv-tabbar>
		<uv-safe-bottom></uv-safe-bottom>
	</view>
</template>

<script setup>
import { reactive, watch, ref } from 'vue';
import { useTabbarStore } from '@/stores/tabbar';
const tabbarStore = useTabbarStore();
const props = defineProps({
	current: {
		type: Number
	}
});

watch(
	() => props.current,
	(value) => {
		tabbarStore.activeTabbar = value;
	},
	{
		immediate: true
	}
);

const list = reactive([
	{
		text: '首页',
		icon: 'home',
		pagePath: 'pages/home/index'
	},
	{
		text: '成长记录',
		icon: 'photo',
		pagePath: 'pages/growth/index'
	},
	{
		text: '我的',
		icon: 'account',
		pagePath: 'pages/mine/index'
	}
]);

function changeTab(e) {
	tabbarStore.activeTabbar = e;
	uni.reLaunch({
		url: '/' + list[e].pagePath
	});
}
</script>

<style scoped>
.u-page__item__slot-icon {
	width: 21px !important;
	height: 21px !important;
}

.u-page__item__slot-icon-index {
	width: 20px !important;
	height: 20px !important;
}
</style>
